<template>
	<view :style="{paddingBottom:bottom+'px'}" v-if="cart.length!==0" class="cart-container">
		<!-- <my-address></my-address> -->
		<view :style="{height:stateBarHeight+'px',width:100+'%','background-color':'#fff',position:'fixed',top:'0',zIndex:'10'}"></view>
		<view class="cart-title" :style="{top:stateBarHeight+'px'}">
			<!-- <view>{{Math.random()}}</view> -->
			<!-- <uni-icons type="shop" size="18"></uni-icons> -->
			<view class="cart-title-text">购物车<text style="font-size: 14px;">( {{total}} )</text></view>
			<view>
				<text v-if="isShowOperation" @click="operation(false)" class="operation">管理</text>
				<u-tag @close="operation(true)" size="mini" closeable type="error" class="tag" shape="circle" mode="plain" @click="operation(true)" v-else text="管理" />
			</view>
		</view>
		
		<view :style="{marginBottom:stateBarHeight+'px'}"></view>
		<!-- 滚动通知 -->
		<view v-if="isShowMsg" class="msg">
			<u-notice-bar @close="close" close-icon type="success" border-radius="20" :list="list[random]"></u-notice-bar>
		</view>
		<!-- 商品列表区域 -->
		<uni-swipe-action class="a">
			<block v-for="(item,index) in cartA" :key="index">
				<uni-swipe-action-item :rightOptions="options" @click="swipeActionClickHandler(item)">
					<my-goods @numHandler="numHandler" :showNum="true" @radioChange="radioChangeHandler"
						:isShowRadio="true" :goods="item"></my-goods>
				</uni-swipe-action-item>
			</block>
		</uni-swipe-action>

		<!-- 结算区域 -->
		<my-settle @gotoOrder="gotoOrder" @removeGoods="removeGoods" :action="isShowOperation"></my-settle>
		
		<u-tabbar style="padding-top: 50px;" :list="tabbar"></u-tabbar>
	</view>
	<!-- 空白购物车区域 -->
	<view v-else class="empty-cart">
		<image src="/static/cart_empty@2x.png" class="empty-img"></image>
		<text class="tip-text">空空如也~</text>
		<u-tabbar style="padding-top: 50px;" :list="tabbar"></u-tabbar>
	</view>
</template>

<script>
	import badgeMix from '../../mixins/tabbar-badge.js'
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#C00000'
					}
				}],
				list: [
					[
						'寒雨连江夜入吴',
						'平明送客楚山孤',
						'洛阳亲友如相问',
						'一片冰心在玉壶'
					],
					[
						'我画蓝江水悠悠',
						'爱晚亭上枫叶愁'
					],	
					[
						'淡泊以明志',
						'宁静以致远'
					],
					[
						'满堂花醉三千客',
						'一剑霜寒十四州'
					],	
					[
						'山重水复疑无路',
						'柳暗花明又一村'
					],
					[
						'夕阳无限好',
						'只是近黄昏'
					]
				],
				isShowMsg: true,
				isShowOperation:true,
				random:'',
				bottom:70,
				// cart:[]
			};
		},
		computed: {
			...mapState('m_cart', ['cart']),
			...mapGetters('m_cart', ['total']),
			...mapState(['tabbar','stateBarHeight']),
			cartA(){
				return [...this.cart].reverse()
			}
		},
		
		methods: {
			radioChangeHandler(data) {
				console.log(data)
				this.updateGoodsState(data)
			},
			...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount', 'removeGoodsById','removeMulti']),
			numHandler(e) {
				this.updateGoodsCount(e)
			},
			swipeActionClickHandler(e) {
				this.removeGoodsById(e.goods_id)
			},
			//关闭滚动弹窗
			close(){
				this.isShowMsg = false
			},
			operation(pam){
				this.isShowOperation = pam
			},
			removeGoods(){
				this.removeMulti(this.cart)
			},
			gotoOrder(){
				uni.navigateTo({
					url:'/subpkg/order/order'
				})
			}
		},
		mixins: [badgeMix],
		onPageScroll(e){
			// console.log(e.scrollTop)
		},
		onLoad() {
				
			// this.$axios.post('/cart/updategoodsstate',{goodsArrId:[{goods_id:558,goods_state:false},{goods_id:5584,goods_state:true},{goods_id:5584,goods_state:true},{goods_id:5584,goods_state:true}]}).then(res=>{
			// 	console.log(res)
			// }).catch(err=>console.log(err))
			
			// this.$axios.post('/cart/updateGoodsCount',{goods:{goods_id:5584,goods_count:5}}).then(res=>{
			// 	console.log(res)
			// }).catch(err=>console.log(err))
			
			// this.$axios.post('/cart/delCart',{goods:[{goods_id:5584}]}).then(res=>{
			// 	console.log(res)
			// }).catch(err=>console.log(err))
			// this.$axios.get('/user/cart').then(res=>{
			// 	this.cart = res.result
			// }).catch(err=>{
			// 	console.log(err.message)
			// })
			
			this.$store.commit('adaptive')
			//有时候会出现-1,会导致滚动通知消失,不打算修复了,因为这样也挺好
			this.random = Math.round(Math.random()*this.list.length-1) 
			
			if(uni.getSystemInfoSync().host){
				if(uni.getSystemInfoSync().host.env === "WeChat"){
					this.bottom += 50
				}
			}	
		},
	
	}
</script>

<style lang="scss">
	.a{
		position: relative;
		top: 60px;
	}
	.u-tag{
		font-size: 16px !important;
		
		.u-close-icon{
			margin-left: 0 !important;
		}
	}
	.msg{
		padding: 15px 7px 10px 7px;
		position: relative;
		top: 55px;
	}
	page {
		background-color: rgb(230, 230, 230);
	}

	.cart-container {
		padding-bottom: 120px;
		background-color: rgb(230, 230, 230);
		// height: 100%;
	}

	.cart-title {
		position: fixed;
		margin-bottom: 30px;
		top: 0;
		z-index: 10;
		width: 100%;
		background-color: rgba(255,255,255,1);
		display: flex;
		height: 50px;
		padding: 0 10px;
		// border-bottom: 1px solid #efefef;
		align-items: center;
		font-size: 14px;
		color: black;
		justify-content: space-between;

		.cart-title-text {
			// margin-left: 10px;
			font-size: 18px;
			line-height: 24px;
		}
	}

	.empty-cart {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 150px;

		.empty-img {
			width: 90px;
			height: 90px;
		}

		.tip-text {
			font-size: 12px;
			color: gray;
			margin-top: 15px;
		}
	}
</style>
